<template>
  <div class="">
    <!--组件遮罩层，用于在设计器中显示-->
    <div v-if="shade" class="shade"></div>

    <video-player ref="videoPlayer"
                  :playsinline="true"
                  :options="playerOptions"></video-player>
  </div>
</template>

<script>

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  import 'video.js/dist/video-js.css'
  import { videoPlayer } from 'vue-video-player'

  const _this = {
    name: 'VideoPlayerComp', // 此名称必须填写，且必须与组件文件名相同
    mixins: [FuncCompMixin],
    components: {
      videoPlayer
    },
    attr: {
      version: '1.1',
      configDataTemp: Object.assign({

        autoplay: false,
        muted: true,
        loop: false,
        aspectRatio: '',
        sourcesType: 'video/mp4',
        sourcesSrc: '',
        posterRelativePath: '',
        notSupportedMessage: '此视频暂无法播放，请检查视频地址是否正确'

      }, PnDesigner.buildFuncCompDatasourceField({ // 如果组件需要配置数据源，则需要调用此函数构建数据源字段对象
        ds_resultObjTemplate: [
          {
            field: 'url',
            remark: '视频地址'
          }
        ],
        ds_resultObj: [
          {
            "url": ""
          }
        ],
      }), PnDesigner.buildFuncCompGlobalField())
    },
    data() {
      return {}
    },
    mounted() {
      this.init();
    },
    methods: {
      init () { // 组价初始化函数，函数名必须使用init，不可更改
        this.initDatasource(() => {
          this.runCustomGlobalJsCode()
        }, (result) => {
          this.runCustomGlobalJsCode()
        });
      }

    },
    computed: {
      player() {
        return this.$refs.videoPlayer.player
      },
      playerOptions () {
        let option = {
          autoplay: this.component.compConfigData.autoplay, //如果true,浏览器准备好时开始回放。
          muted: this.component.compConfigData.muted, // 默认情况下将会消除任何音频。
          loop: this.component.compConfigData.loop, // 导致视频一结束就重新开始。
          preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
          language: 'zh-CN',
          width: this.$parent.$parent.layoutItem.layoutItemConfigData.width - 2,
          height: this.$parent.$parent.layoutItem.layoutItemConfigData.height - 2,
          // aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          // fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          sources: [{
            type: this.component.compConfigData.sourcesType,//这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
            src: this.component.compConfigData.ds_resultObj[0].url ?
              this.component.compConfigData.ds_resultObj[0].url : this.component.compConfigData.sourcesSrc
          }],
          poster: window.g.AXIOS_BASE_URL + this.component.compConfigData.posterRelativePath, //你的封面地址
          notSupportedMessage: this.component.compConfigData.notSupportedMessage, //允许覆盖Video.js无法播放媒体源时显示的默认信息。
          controlBar: {
            timeDivider: true,
            durationDisplay: true,
            remainingTimeDisplay: false,
            fullscreenToggle: true  //全屏按钮
          }
        };
        if (this.component.compConfigData.aspectRatio) {
          option.aspectRatio = this.component.compConfigData.aspectRatio
        }
        return option
      }
    }
  };

  export default _this
</script>

<style scoped>

</style>
